<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="renderer" content="webkit" />

    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="-1"/>

    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <title>jackdizhu 主页</title>
    <link rel="shortcut icon" href="/favicon.ico"/>

    <style type="text/css" id="style">
    </style>

</head>
<body>

<header>
        jackdizhu 主页
    </header>
    <div class="content">

        <h5><span>d3 简单应用 画矩形</span></h5>
        <div class="clearfix">
            <div id="app"></div>
        </div>
        
    </div>

    <script type="text/javascript" src="./dist/index.js"></script>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script type="text/javascript">
        var w = 200;
        var h = 200;
        var dataset = [1,2,3,4,5]; // 生成 dataset.length 个矩形
        var svg = d3.select("#app") // 选择页面中id=app
        .append("svg")//生成svg标签
        .attr("width", w)//设定svg宽度
        .attr("height", h);//设定svg高度

        svg.selectAll("rect") // rect 矩形）
        .data(dataset) //传入数据
        .enter() // 生成 dataset.length 个 rect 矩形
        .append("rect") // 固定语法，先select选择，后enter生成，然后append绑定
        .attr("x", function () {
            return parseInt(Math.random()*175);
        }) // 左上角X坐标
        .attr("y", function () {
            return parseInt(Math.random()*175);
        }) // 左上角Y坐标
        .attr("width", 25)
        .attr("height", 25)
        // 边框
        .style("stroke",'#f00')
        // 填充色
        .style("fill",'#666');
     </script>
</body>
</html>
